<script setup>
import {ref} from "vue";
import dayjs from "dayjs";
import {useUserStore} from "@/stores/user"
import {addInventory} from "@/apis/inventory"
import SelectWarehouseComponent from "@/components/Warehouse/SelectComponent.vue";
import {Message} from "tdesign-mobile-vue";
import {useRouter} from "vue-router"

const router = useRouter()
const visible = ref(false);
const step = ref(0);
const stepsList = ref([
  {
    key: 0,
    title: "创建盘点单"
  }, {
    key: 1,
    title: "进行盘点"
  }, {
    key: 2,
    title: "盘点完成"
  },
])
const store = useUserStore();
const formData = ref({
  warehouse: "",
  title: "盘点单" + dayjs().format("YYYY-MM-DD"),
  notice: "",
  type: 3,
  record_user_id: store.user.id
})

function selectWarehouseConfirm(item) {
  formData.value.warehouse_id = item.id;
  formData.value.warehouse = item.name;
  visible.value = false;
}

function createInventory() {
  addInventory(formData.value)
      .then(res => {
        const {code, msg} = res.data;
        if (code === 1) {
          step.value = 1;
          Message.success({
            content: "盘点单创建成功",
            context: document.querySelector('main'),
            offset: [8, 8]
          });
          setTimeout(() => {
            router.push({
              name: "material-check-info",
              params: {id: res.data.data.id}
            })
          }, 2000)
        } else {
          Message.error({
            content: msg,
            context: document.querySelector('main'),
            offset: [8, 8]
          });
        }
      })
}
</script>
<template>
  <main>
    <div class="steps-container">
      <t-steps :current="step">
        <t-step-item v-for="(item, index) in stepsList" :key="index" :title="item.title"/>
      </t-steps>
    </div>
    <t-form label-width="130" @submit="createInventory">
      <t-form-item requiredMark label="清点仓库">
        <t-input borderless readonly v-model="formData.warehouse" @click="visible=true"/>
      </t-form-item>
      <t-form-item label="记录人">
        <t-input borderless v-model="store.user.profile.name" readonly style="color: black;"/>
      </t-form-item>
      <div style="margin: 8px;">
        <t-button block type="submit" theme="primary">创建</t-button>
      </div>
    </t-form>

    <t-popup v-model="visible" placement="bottom">
      <div class="header">
        <div class="btn btn--cancel" @click="visible=false">
          <t-icon name="chevron-down"></t-icon>
        </div>
        <div class="title">请选择仓库</div>
        <div class="btn btn--confirm" @click="visible=false"></div>
      </div>
      <SelectWarehouseComponent @confirm="selectWarehouseConfirm"/>
    </t-popup>

  </main>
</template>
<style scoped lang="less">
.t-cell {
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  height: 116rpx;
}

.title {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  color: var(--td-text-color-primary, rgba(0, 0, 0, 0.9));
}

.btn {
  font-size: 16px;
  padding: 16px;
}

.btn--cancel {
  color: var(--td-text-color-secondary, rgba(0, 0, 0, 0.6));
}

.btn--confirm {
  color: #0052d9;
  width: 20px;
  height: 20px;
}

.steps-container {
  padding: 6px;
}
</style>